<template>
	<!-- 咨询详情 -->
	<view class="">
		<view class="main">
			<view style="height: 24rpx;"></view>

			<view style="display: flex;padding-bottom: 20rpx;">
				<view class="title">
					案件编号:
				</view>
				<view class="content">
					{{itemDetail.no}}
				</view>
			</view>

			<view style="display: flex;padding-bottom: 20rpx;">
				<view class="title">
					客户名称:
				</view>
				<view class="content">
					{{itemDetail.custName}}
				</view>
			</view>

			<view style="display: flex;padding-bottom: 20rpx;">
				<view class="title">
					咨询领域:
				</view>
				<view class="content">
					{{itemDetail.domainDict}}
				</view>
			</view>
			
			<view style="display: flex;padding-bottom: 20rpx;" v-if="itemDetail.domainDict=='诉讼保全'">
				<view class="title">
					标的名称:
				</view>
				<view class="content">
					{{itemDetail.targetName}}
				</view>
			</view>
			
			<view style="display: flex;padding-bottom: 20rpx;" v-if="itemDetail.domainDict=='诉讼保全'">
				<view class="title">
					对方名称:
				</view>
				<view class="content">
					{{itemDetail.otherName}}
				</view>
			</view>
			
			
			
			

			<view style="display: flex;padding-bottom: 20rpx;">
				<view class="title">
					希望我们:
				</view>
				<view class="content">
					{{itemDetail.hopeDict}}
				</view>
			</view>
			<view style="display: flex;padding-bottom: 20rpx;">
				<view class="title">
					咨询内容:
				</view>
				<view class="content">
					{{itemDetail.content}}
				</view>
			</view>

			<view style="display: flex;padding-bottom: 20rpx;">
				<view class="title">
					咨询文件:
				</view>
				
				<scroll-view scroll-y="true" style="width: 536rpx;max-height: 400rpx;">
					<view v-for="(item,index) in dataList" :key="index">
						<view class="list-content-yuyin" v-if="item.attachFile.fileSuffix =='aac' || item.attachFile.fileSuffix=='m4a'">
							<image :src="item.openOrStopMusic ? musicStop:musicOpen" @click="opreaMusic(item,index)"
								style="width: 44rpx;height: 44rpx;margin-left: 24rpx;"></image>
							<image src="../../../../static/phone/case-detail-music.png"
								style="width: 160rpx;height: 28rpx;margin-left: 24rpx;"></image>
						</view>
									
						<view style="display: flex;" v-if="item.attachFile.fileSuffix !='aac' && item.attachFile.fileSuffix!='m4a'"  @click="preview(item,index)">
							<image src="../../../../static/phone/jpg.png" style="width: 48rpx;height: 48rpx;"
							v-if="item.attachFile.fileSuffix =='jpg' || item.attachFile.fileSuffix=='png'
							|| item.attachFile.fileSuffix=='jpeg'|| item.attachFile.fileSuffix=='bmp'"></image>
							<image src="../../../../static/phone/case-detail-excel.png" style="width: 48rpx;height: 48rpx;"
							v-if="item.attachFile.fileSuffix =='xls' || item.attachFile.fileSuffix=='xlsx'"></image>
							<image src="../../../../static/phone/case-detail-word.png" style="width: 48rpx;height: 48rpx;"
							v-if="item.attachFile.fileSuffix =='docx' || item.attachFile.fileSuffix=='doc'"></image>
							<image src="../../../../static/phone/case-detail-ppt.png" style="width: 48rpx;height: 48rpx;"
							v-if="item.attachFile.fileSuffix =='pptx' || item.attachFile.fileSuffix=='ppt'"></image>
							<image src="../../../../static/phone/case-detail-pdf.png" style="width: 48rpx;height: 48rpx;"
							v-if="item.attachFile.fileSuffix =='pdf' || item.attachFile.fileSuffix=='pdfx'"></image>
							
							<text>{{item.attachFile.nameF}}</text>
						</view>
						
					</view>
				</scroll-view>
				
			</view>


			<view style="display: flex;padding-bottom: 20rpx;">
				<view class="title">
					发起时间:
				</view>
				<view class="content">
					{{itemDetail.createTime}}
				</view>
			</view>

			<view style="display: flex;padding-bottom: 20rpx;" @click="clickTag()">
				<view class="title">
					发起人:
				</view>
				<view class="content">
					{{itemDetail.createAt}}
				</view>
				<image src="../../../../static/arrow_right.png" class="right-item-arrow"></image>
			</view>

			<view style="display: flex;padding-bottom: 20rpx;">
				<view class="title">
					状态:
				</view>
				<view class="content">
					{{itemDetail.status.desc}}
				</view>
			</view>
			<view style="display: flex;padding-bottom: 20rpx;" v-if="itemDetail.status.code==7 ||itemDetail.status.code==8">
				<view class="title">
					原因:
				</view>
				<view class="content">
					{{itemDetail.failMsg}}
				</view>
			</view>

		</view>
		<!-- 底部 -->
		<view class="view-bottom" v-if="role=='0' && itemDetail.status.code=='0'">
			<view class="view-bottom-s">
				<view class="view-bottom-b" @click="operate(0)">
					<!-- 普通用户  待提交状态 -->
					<text>编辑</text>
				</view>
			</view>
		</view>
		
		<view class="view-bottom" v-if="role=='0' && (itemDetail.status.code=='7' || itemDetail.status.code=='8')">
			<view class="view-bottom-s">
				<view class="view-bottom-b" @click="operate(1)">
					<text >重新发起</text>
				</view>
			</view>
		</view>
		<view class="view-bottom" v-if="(role=='1' || role=='2') && itemDetail.status.code=='1'">
			<view class="view-bottom-s">
				<view class="view-bottom-b" @click="operate(2)">
					<text >审核</text>
				</view>
			</view>
		</view>
		<view class="view-bottom" v-if="(role=='1' || role=='2') && itemDetail.status.code=='2'">
			<view class="view-bottom-s">
				<view class="view-bottom-b" @click="operate(3)">
					<text >分配</text>
				</view>
			</view>
		</view>
		
		
		

		<view class="zhezhao" v-if="showZhezhao">
			<view class="auditpage">
				<view class="message-center-top">
					<text class="message-center-top-title">审核</text>
					<image src="../../../../static/phone/close1.png" class="message-center-top-img" @click="clickClose">
					</image>
				</view>

				<view style="margin-top: 8rpx;display: flex;">
					<text class="star">*</text>
					<text class="title2">审核结果：</text>
					<uni-data-checkbox v-model="auditResult" :localdata="auditList" selectedTextColor="#666666">
					</uni-data-checkbox>
				</view>

				<view style="margin-top: 8rpx;display: flex;">
					<text class="star">*</text>
					<text class="title2">审核备注：</text>

				</view>

				<view class="uni-textarea" style="width: 558rpx;height: 216rpx;border-radius: 4rpx;
				margin-left:32rpx;background-color: #f7f7f7;margin-top: 12rpx;">
					<textarea placeholder="请输入不通过的原因" placeholder-style="color:#666666;font-size:28rpx" class="textarea"
						v-model="content" />
				</view>

				<view style="display: flex;margin-top: 32rpx;">
					<view class="zhezhao-bottom-x zhezhao-bottom-l" @click="clickClose">
						取消
					</view>
					<view class="zhezhao-bottom-x zhezhao-bottom-r" @click="clickSubmit">
						提交
					</view>
				</view>




			</view>
		</view>



	</view>

</template>

<script>
	let app = ''
	const innerAudioContext = uni.createInnerAudioContext()
	import verify from '@/pages/utils/verifyUtils.js'
	
	export default {
		data() {
			return {
				status: '', //0待提交、1待审核、2待分配、7审核不通过、8异常终止
				id:'',
				role:'',
				roleUrl:'',
				itemDetail:null,
				dataList: [],
				showZhezhao: false,
				auditList: [{
						text: '通过',
						value: 0
					},
					{
						text: '不通过',
						value: 1
					}
				],
				auditResult: -1,//1 不通过 0 通过
				content: "",
				
				musicOpen: require('../../../../static/phone/case-detail-open.png'),
				musicStop: require('../../../../static/phone/case-detail-stop.png'),
			}
		},
		onLoad(options) {
			let _this = this
			app = getApp()
			_this.role = app.globalData.role
			_this.roleUrl =  _this.$roleUrl({tab:_this.role})
			console.log('options',options)
			_this.id = options.id
			
			


		},
		onShow() {
			
			//获取案件咨询详情
			this.getDetail()
			//获取案件关联文件
			this.getFileList()
		},
		mounted() {

		},
		methods: {
			async getDetail(){
				let _this = this
				uni.showLoading({
					title:'正在加载...'
				})
				const res = await _this.$myRequest({
					url: "/admin/case/"+_this.id,
					headers:{
						"token":uni.getStorageSync("accessToken")
					},
					method:'GET',//默认是GET
				})
				console.log('详情',res)
				uni.hideLoading()
				if(res.data.code==200){
					_this.itemDetail = res.data.data
					_this.status=_this.itemDetail.status.desc
					if(_this.itemDetail.domainDict=='诉讼保全'){
						if(verify.isNotEmpty(_this.itemDetail.targetName)){
							_this.itemDetail.targetName = _this.itemDetail.targetName
						}else{
							_this.itemDetail.targetName = ''
						}
						if(verify.isNotEmpty(_this.itemDetail.otherName)){
							_this.itemDetail.otherName = _this.itemDetail.otherName
						}else{
							_this.itemDetail.otherName = ''
						}
					}
					
				}
			},
			
			/**
			 * 案件关联文件
			 */
			async getFileList(){
				let _this = this		
				let parmas={
					"page":1,
					"size":1000,
					"caseId":_this.id,
				}
				const res = await _this.$myRequest({
					url: `/${_this.roleUrl}/caseAttach/listByCase`,
					data:parmas,
					method:'POST',//默认是GET
				})
				console.log('文件列表',res)
				if(res.data.code==200){
					let list = res.data.data.list
					for (var i = 0; i < list.length; i++) {
						let name = list[i]['attachFile']['name']
						let nameArray = name.split('.')
						//后缀
						let nameL = nameArray[nameArray.length-1]
						//后缀前面的部分
						let nameF = name.substring(0,name.length-nameL.length-1)
						if(name.length>20){
							nameF = nameF.substring(0,17)+'...'+nameL
						}else{
							nameF = name
						}
						list[i]['attachFile']['nameF'] = nameF
						
						if(nameL =='m4a' || nameL=='aac'){
							list[i]['openOrStopMusic'] = false
						}
						
					}
					_this.dataList = list
				}
				
			},
			
			
			/**
			 * 操作
			 */
			operate(val) {
				let _this = this
				if(val===0){
					//编辑
					let item = JSON.stringify(_this.itemDetail)
					uni.navigateTo({
						url:'../../customs/initiatedConsult/initiatedConsult?item='+item+'&from=edit'
					})
				}else if(val===1){
					//重新发起
					// _this.doIt()
					let item = JSON.stringify(_this.itemDetail)
					uni.navigateTo({
						url:'../../customs/initiatedConsult/initiatedConsult?item='+item+'&from=edit'
					})
				}else if(val===2){
					//审核
					_this.showZhezhao = true
				}else if(val===3){
					//分配
					uni.navigateTo({
						url: './assignment?id='+_this.id+'&no='+_this.itemDetail.no
					})
				}
				
			},
			
			//（发起者）重新发起
			async doIt(){
				let _this = this
				uni.showLoading({
					title:'正在提交...'
				})
				
				let data={
					custId:_this.itemDetail.id,
					custName:_this.itemDetail.custName,
					domainDict:_this.itemDetail.domainDict,
					hopeDict:_this.itemDetail.hopeDict,
					content:_this.itemDetail.content,
				}
				
				if(_this.itemDetail.domainDict=='诉讼保全'){
					if(verify.isNotEmpty(_this.itemDetail.otherName)){
						_this.$set(data, 'otherName', _this.itemDetail.otherName);
					}
					if(verify.isNotEmpty(_this.itemDetail.targetName)){
						_this.$set(data, 'targetName', _this.itemDetail.targetName);
					}
				}
				
			
				if(_this.dataList.length>0){
					let attachFileIds = []
					for (var i = 0; i < _this.dataList.length; i++) {
						let id = _this.dataList[i]['id']
						attachFileIds.push(id)
					}
					_this.$set(data, 'attachFileIds', attachFileIds);
				}
				
				const res = await _this.$myRequest({
					url: `/${_this.roleUrl}/case/1`,
					data:data,
					method:'POST',
				})
				uni.hideLoading()
				
				if(res.data.code==200){
					uni.showToast({
						title:'重新发起成功!',
						icon:'success',
						duration:2000
					})
					uni.setStorageSync("initated","initated")
					setTimeout(function() {
						
						uni.navigateBack({
							delta:-1
						})
					}, 2000);
					// _this.$EventBus.$emit('initated');
				}else{
					uni.showModal({
						title:'提示',
						content:res.data.msg,
						showCancel:false,
						success: (res) => {
							if(res.confirm){
								
							}
						}
					})
				}
				
			},

			clickClose() {
				console.log('关闭')
				let _this = this
				_this.auditResult = -1
				_this.content = ''
				_this.showZhezhao = false
			},
			async clickSubmit() {
				
				let _this = this
				console.log(_this.auditResult)
				if(_this.auditResult==-1){
					uni.showToast({
						title:'请选择审核结果!',
						icon:'none'
					})
					return
				}
				if(_this.auditResult==1){
					if(!verify.isNotEmpty(_this.content)){
						uni.showToast({
							title:'请填写审核不通过的原因!',
							icon:'none'
						})
						return
					}
				}
				uni.showLoading({
					title:'正在审核...',
					
				})
				const res = await _this.$myRequest({
					url: `/${_this.roleUrl}/case/review/${_this.auditResult}`,
					data:{
						failMsg:_this.content,
						caseId:_this.id
					},
					method:'PUT',//默认是GET
				})
				uni.hideLoading()
				console.log('审核结果',res)
				if(res.data.code==200){
					uni.showToast({
						title:'操作成功!',
						icon:'success'
					})
					_this.clickClose()
					_this.getDetail()
				}else{
					
					uni.showModal({
						title:'提示',
						content:res.data.msg,
						showCancel:false,
						success: (res) => {
							if(res.confirm){
								
							}
						}
					})
				}
				
				
				
				
				// this.clickClose()
			},
			
			/**
			 * 操作音频
			 */
			opreaMusic(val,index) {
				console.log(val)
			
				let _this = this
				let list = _this.dataList
				
				if(!val.openOrStopMusic){
					innerAudioContext.src = val.attachFile.fileUrl
					innerAudioContext.play();
				}else{
					innerAudioContext.pause()
				}
				list[index]['openOrStopMusic'] = !list[index]['openOrStopMusic']
				_this.dataList = list
			},
			
			/**
			 * 预览文档
			 */
			async preview(item,index){
			
				let url = item.attachFile.fileUrl
				const res = await this.$myRequest({
					url: `/comm/oss/url`,
					data:{
						ossPath:url
					},
					method:'GET',//默认是GET
				})
				// console.log('获取文件路径',res)
				if(res.data.code==200){
					let ss = res.data.data.url
					if(item.attachFile.fileSuffix =='jpg' || item.attachFile.fileSuffix=='png'){
						let ssl = []
						ssl.push(ss)
						uni.previewImage({
							indicator: "none", //图片指示器样式
							current:0,
							urls:ssl,
							success: (img) => {
								// console.log(img)
							}
						})
					}else{
						uni.downloadFile({
							url:ss,
							success: (downloadFile) => {
								// console.log(downloadFile)
								uni.openDocument({
									filePath:downloadFile.tempFilePath
								})
							}
						})
						
					}
					
				}
			
			},
			/**
			 * 查看发起人
			 */
			clickTag(){
				console.log('-----跳转')
				
				let users = {
					user:{
						account:this.itemDetail.account
					},
					avatarPic:this.itemDetail.account.avatarPic
				}
				let users2 = encodeURIComponent(JSON.stringify(users))
				uni.navigateTo({
					url:'../../customs/undertakerOrJoin/userDetail?tag=sponsor'+'&users='+users2,
				})
			},
			
		}
	}
</script>

<style>
	page {
		background-color: #f7f7f7;
	}

	.zhezhao {
		width: 100%;
		height: 100vh;
		background: rgba(0, 0, 0, 0.4);
		z-index: 9999;
		position: fixed;
		left: 0;
		top: 0;
		overflow: scroll;
		// padding-top: 10vh;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
<style scoped lang="scss">
	.main {
		background-color: #ffffff;
		padding-left: 32rpx;
		padding-right: 32rpx;
	}

	.title {
		width: 150rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
	}

	.content {
		width: 536rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
	}

	.filename {
		width: 472rpx;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		margin-left: 16rpx;
	}

	.filelist {
		display: flex;
		width: 536rpx;
		padding-bottom: 20rpx;
		align-items: center;
	}

	.message-center-top {
		height: 108rpx;
		display: flex;
		align-items: center;
	}

	.message-center-top-title {
		font-size: 32rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #333333;
		margin-left: 280rpx;
	}

	.message-center-top-img {
		width: 24rpx;
		height: 24rpx;
		margin-right: 32rpx;
		margin-left: auto;
	}

	.view-bottom {
		position: fixed;
		width: 100%;
		bottom: 0;
		background-color: #ffffff;
		padding-bottom: env(safe-area-inset-bottom); // 适配iphoneX的底部
	}

	.view-bottom-s {
		height: 108rpx;
		display: flex;
		align-items: center;
	}

	.view-bottom-b {
		width: 686rpx;
		height: 88rpx;
		background: #2DA9C5;
		border-radius: 58rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 36rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #E8F7FB;
		line-height: 50rpx;
		margin-left: 32rpx;
	}

	.auditpage {
		width: 622rpx;
		height: 640rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
	}

	.star {

		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FF6132;
		margin-left: 32rpx;
	}

	.title2 {
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 550;
		color: #333333;
		margin-left: 4rpx;
	}

	.textarea {
		padding-left: 32rpx;
		padding-right: 32rpx;
		padding-top: 24rpx;
		padding-bottom: 24rpx;
		font-size: 28rpx;
		color: #333333;
		line-height: 20rpx;
		width: 490rpx;
		height: 200rpx;
	}

	.zhezhao-bottom-x {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 260rpx;
		height: 88rpx;
		border-radius: 44rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;

	}

	.zhezhao-bottom-l {
		border: 1px solid #2DA9C5;
		color: #2DA9C5;
		background-color: #FFFFFF;
		margin-left: 32rpx;

	}

	.zhezhao-bottom-r {
		background: #2DA9C5;
		color: #FFFFFF;
		margin-left: auto;
		margin-right: 32rpx;
	}
	
	.list-content-yuyin {
		width: 384rpx;
		height: 80rpx;
		background: #F7F7F7;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
	}
	
	.right-item-arrow {
		// margin-left: 8rpx;
		margin-left: auto;
		width: 12rpx;
		height: 24rpx;
		margin-top: 5px;
	}
</style>
